<template>
  <div ref="wordCloud" class="word-cloud">
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts/core";
import {TitleComponent} from "echarts/components";
import "echarts-wordcloud";
import {onMounted, ref} from "vue";

interface WordCloudProps {
  width: string;
  height: string;
}

// eslint-disable-next-line no-undef
const props = defineProps<WordCloudProps>();

echarts.use([TitleComponent]);

let data = [
  {value: "30", name: "前端"},
  {value: "29", name: "后端"},
  {value: "28", name: "Golang"},
  {value: "27", name: "Java"},
  {value: "22", name: "大学牲"},
  {value: "25", name: "人工智能"},
  {value: "24", name: "博客"},
  {value: "23", name: "程序员"},
  {value: "22", name: "生活"},
  {value: "21", name: "上班族"},
  {value: "20", name: "躺平"},
  {value: "16", name: "计算机"},
  {value: "15", name: "数据结构"},
  {value: "14", name: "算法"},
  {value: "13", name: "Epoll"},
  {value: "12", name: "动态规划"},
  {value: "11", name: "二叉树"},
  {value: "10", name: "编程"},
  {value: "9", name: "背包问题"},
];

function initChart(e: HTMLElement) {
  var myChart = echarts.init(e);
  const option = {
    title: {
      text: "",
      x: "center"
    },
    backgroundColor: "#fff",
    series: [
      {
        type: "wordCloud",
        //用来调整词之间的距离
        gridSize: 10,
        //用来调整字的大小范围
        // Text size range which the value in data will be mapped to.
        // Default to have minimum 12px and maximum 60px size.
        sizeRange: [14, 40],
        // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
        //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
        // rotationRange: [-45, 0, 45, 90],
        // rotationRange: [ 0,90],
        rotationRange: [0, 0],
        //随机生成字体颜色
        // maskImage: maskImage,
        textStyle: {
          color: function () {
            return (
                "rgb(" +
                Math.round(Math.random() * 255) +
                ", " +
                Math.round(Math.random() * 255) +
                ", " +
                Math.round(Math.random() * 255) +
                ")"
            );
          }
        },
        left: "center",
        top: "center",
        right: null,
        bottom: null,
        width: "100%",
        height: "100%",
        //数据
        data: data
      }
    ]
  };
  myChart.setOption(option);
}

const wordCloud = ref<HTMLElement>();

onMounted(() => {
  wordCloud.value!.style.width = props.width;
  wordCloud.value!.style.height = props.height;
  initChart(wordCloud.value as HTMLElement);
});
</script>

<style scoped>
.word-cloud {
  height: min(100vh,100vw * .6875);
  width: min(calc(100vh / .6875),100vw);
}
</style>